<template>
  <div id="home-wrapper">
    <!-- <header class="home-header wrap" :class="{'active': state.headerScroll}"> -->
    <header class="home-header wrap">
      <router-link to="/category">
        <i class="nbicon nbmenu2"></i>
      </router-link>
      <div class="header-search">
        <span class="app-name">新蜂商城</span>
        <i class="nbicon nbSearch"></i>
        <router-link class="search-title" to="/product-list?from=home">
          山河无恙，人间皆安
        </router-link>
      </div>
      <router-link class="login" to="/login">登录</router-link>
    </header>
    <!-- <SubHeader /> -->
    <!-- <div class="block"></div>
        <NavBar></NavBar>
        <swiper :list="state.swiperList"/>
        <section class="category-list">
          <div v-for="item in state.categoryList" :key="item.categoryId">
              <img :src="item.imgUrl">
              <span>{{ item.name }}</span>
          </div>
        </section>
        <section class="goods">
          <header class="goods-header">新品上线</header>
          <van-skeleton title :row="3" :loading="state.loading">
              <div class="goods-box">
                  <goods-item 
                  v-for="item in state.newGoodses"
                  :key="item.goodsId" 
                  @click="gotoDetail(item.goodsId)"
                  :goods="item"/>
              </div>
          </van-skeleton>
        </section>
        <section class="goods">
          <header class="goods-header">热销商品</header>
          <van-skeleton title :row="3" :loading="state.loading">
              <div class="goods-box">
                  <goods-item 
                  v-for="item in state.hotGoodses"
                  :key="item.goodsId" 
                  :goods="item"/>
              </div>
          </van-skeleton>
        </section>
        <section class="goods">
          <header class="goods-header">推荐商品</header>
          <van-skeleton title :row="3" :loading="state.loading">
              <div class="goods-box">
                      <goods-item
                          v-for="item in state.recommendGoodses" 
                          :key="item.goodsId"
                          :goods="item"/>
                  </div>
          </van-skeleton>
        </section> -->
  </div>
</template>

<script setup>
// import SubHeader from '../components/SubHeader.vue';
import { onMounted, reactive, nextTick } from 'vue'
// import { useRouter } from 'vue-router'
import { getHomeData } from '../service/home'
// import { showLoadingToast, closeToast } from 'vant'
// import NavBar from '~/Navbar.vue'
// import swiper from '~/Swiper.vue'
// import GoodsItem from '~/GoodsItem.vue'
// import _ from 'lodash'
// es8 异步的高级能力 async await
// 挂载后再发送api 请求, 提升性能,  不会去争抢挂载显示
// data 响应式的数据
// 数据的值对应当前的组件状态
// 值会改变 对应新的状态
// 数据和组件的状态是一一对应关系的

// const router = useRouter() // 把全局的路由对象给我们
const state = reactive({
//     headerScroll: false,
//     swiperList: [],
//     newGoodses: [],
//     hotGoodses: [],
//     recommendGoodses: [],
//     loading: true,
//     categoryList: [
//     {
//       name: '新蜂超市',
//       imgUrl: 'https://s.yezgea02.com/1604041127880/%E8%B6%85%E5%B8%82%402x.png',
//       categoryId: 100001
//     }, {
//       name: '新蜂服饰',
//       imgUrl: 'https://s.yezgea02.com/1604041127880/%E6%9C%8D%E9%A5%B0%402x.png',
//       categoryId: 100003
//     }, {
//       name: '全球购',
//       imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%85%A8%E7%90%83%E8%B4%AD%402x.png',
//       categoryId: 100002
//     }, {
//       name: '新蜂生鲜',
//       imgUrl: 'https://s.yezgea02.com/1604041127880/%E7%94%9F%E9%B2%9C%402x.png',
//       categoryId: 100004
//     }, {
//       name: '新蜂到家',
//       imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%88%B0%E5%AE%B6%402x.png',
//       categoryId: 100005
//     }, {
//       name: '充值缴费',
//       imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%85%85%E5%80%BC%402x.png',
//       categoryId: 100006
//     }, {
//       name: '9.9元拼',
//       imgUrl: 'https://s.yezgea02.com/1604041127880/9.9%402x.png',
//       categoryId: 100007
//     }, {
//       name: '领劵',
//       imgUrl: 'https://s.yezgea02.com/1604041127880/%E9%A2%86%E5%88%B8%402x.png',
//       categoryId: 100008
//     }, {
//       name: '省钱',
//       imgUrl: 'https://s.yezgea02.com/1604041127880/%E7%9C%81%E9%92%B1%402x.png',
//       categoryId: 100009
//     }, {
//       name: '全部',
//       imgUrl: 'https://s.yezgea02.com/1604041127880/%E5%85%A8%E9%83%A8%402x.png',
//       categoryId: 100010
//     }
//   ],
})

// const gotoDetail = (id) => {
//   // /detail/:id
//   // console.log(id, 'gotoDetail');
//   // console.log(router, '///');
//   router.push({
//       path: `/detail/${id}`
//   })
// }

onMounted(async () => { // 使用了异步同步化的高级技巧
    // showLoadingToast({
    //     message: '加载中...',
    //     forbidClick: true
    // })
    // 后台接口数据
    const { data } = await getHomeData() // await promise  api serverice
    console.log(data);
    // state.swiperList = data.carousels;
    // state.newGoodses = data.newGoodses;
    // state.hotGoodses = data.hotGoodses;
    // state.recommendGoodses = data.recommendGoodses;
    // state.loading = false;
    // closeToast();
    // // console.log(state.swiperList);
})
// state响应式
// onMounted, await  getHomeData
// state.loading = false
// 热更新 耗时的 dom 更新
// 什么时候快递到了, 热更新已经完成了
// nextTick(() => {
  // 组件挂载了,  且数据绑定模板 已到位
//   const setHeaderScroll = () => {
//     let scrollTop = window.pageYOffset || document.documentElement || document.body.scrollTop
//       // console.log(scrollTop);
//       scrollTop > 100 ? state.headerScroll = true : state.headerScroll = false
//   }
//   window.addEventListener('scroll', _.throttle(setHeaderScroll, 200))
// })
</script>

<style lang="stylus" scoped>
@import '../common/style/mixin'
// 可以一次性设置width height 的mixin 混合
// stylus 提供的tab 缩进为css提供了模块化的能力
// #home-wrapper
//     padding-bottom 2rem
// .block
//     height 1.33333rem
.home-header
    position fixed
    top 0
    left 0
    line-height 1.33333rem
    padding 0.4rem
    font-size 0.4rem
    color #fff
    z-index 10000
    opacity 1
    wh(100%, 1.33333rem)
    fj()
    .nbmenu2
        color $primary
    // &.active
    //     background $primary
    //     .nbmenu2
    //         color #fff
    //     .login
    //         color #fff
    .header-search
        display flex
        width 74%
        box-sizing content-box // 标准盒模型
        height 0.53333rem
        line-height 0.53333rem
        margin 0.26667rem 0
        padding 0.1333rem 0
        color #232326
        border-radius .53333rem
        background rgba(255, 255, 255, .7)
        .app-name
            padding 0 0.26667rem
            color $primary
            font-size 0.53333rem
            font-weight bold
            border-right .026667rem solid #666
        .icon-search
            padding 0 .26667rem
            font-size .45333rem
        .search-title
            font-size .32rem
            color #666
            line-height 0.56rem
    .login
        color $primary
        line-height 1.38667rem

// .category-list
//     display flex
//     flex-shrink 0
//     flex-wrap wrap
//     width 100%
//     padding-bottom .34667rem
//     div
//         display flex
//         flex-direction column
//         width 20%
//         text-align center
//         img
//             wh(.96rem, .96rem)
//             margin .346667rem auto .213333rem auto
// .goods
//     .goods-header
//         background #f9f9f9
//         height 1.3333rem
//         line-height 1.3333rem
//         text-align center
//         color $primary
//         font-size .426667rem
//         font-weight 500
//     .goods-box
//         fj(flex-start)
//         flex-wrap wrap
</style>
